<template>
  <view class="item-contain" :class="className" @click="clickHandler">
    <view class="word"><text class="word-en">{{word.en}}</text><text class="tag">{{ learned ? '[掌握]' : '' }}</text></view>
    <view v-for="(word, index) in word.explains || []" :key="index">
      <view class="translate">{{word}}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['word','className','click', 'learned'],
  data(){
    return {
      id:0
    }
  },
  methods:{
    clickHandler(){
      // this.$emit('click')
    }
  }
}
</script>

<style>
.item-contain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.word {
  margin-bottom: 5px;
}

.word .word-en {
  color: #5ccdd3;
  font-size: 18px;
}

.word .tag {
  color: #666;
  margin-left: 5px;
}

.translate {
  color: #333;
}
</style>